<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<pre>
			webpack异步加载原理：
				webpack ensure：异步加载或者代码切割。把js模块独立导出一个个.js文件，然后使用该模块的时候，
					webpack构造出script dom元素，由浏览器发起异步请求这个js文件，然后执行业务逻辑操作
			
			业务场景：
				main.js依赖三个js文件：
					A.js是点击aBtn按钮后执行的业务逻辑
					B.js是点击bBtn按钮后执行的业务逻辑
					vue.js是main.js需要利用的包
					
				针对以上优化方案：
					假设依赖的3个js文件都很大，A.js  B.js不是main.js所必需的，可以在未来需要的时候使用require.ensure()或者import()异步加载
					
			require.ensure(dependencies：String [],callback：function(require)，errorCallback：function(error)，chunkName：String)
			require.ensure()接受三个参数：
			第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖; 
			第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的Webpack就无法静态分析的时候处理它; 
			第三个参数errorCallback比较好理解，就是处理错误的回调; 
			第四个参数chunkName则是指定打包的组块名称。
			
			require.ensure([], ()=>{
				require('./A.js')
			})
			import('./a.js').then(module => {
				console.log(module)
    		}).catch(err => {
				
        	});
		</pre>
		<div id="app">
			<App />
		</div>
		<button id="aBtn">aBtn</button>
		<button id="bBtn">bBtn</button>
		<!--编译完成后在dist文件下index.html自动引入build.js文件-->
		<!--<script src="./build.js"></script>-->
	</body>
</html>
